<template>
  <div class="page">
    <van-nav-bar title="快递单" left-arrow @click-left="left">
      <template #right>
        <img src="../assets/个人中心/fanhuishouye.png" width="20" alt="" />
      </template>
    </van-nav-bar>
    <van-search shape="round" show-action placeholder="快递单号">
      <template #action>
        <div style="color: #003399">搜索</div>
      </template>
    </van-search>
    <div class="page-text" v-for="(item, index) in allArr" :key="index">
      <div class="page-title" @click="GoDelive()">
        <p>快递单号：{{ item.orderCode }}</p>
        <img src="../assets/Shipment/jiantou.png" width="7" alt="" />
      </div>
      <div class="text">
        <img
          src="../assets/Shipment/暂无消息.png"
          width="70"
          height="60"
          alt=""
        />
        <div>
          <p>{{ item.cusName }}</p>
          <p>
            <span style="color: #999999; font-size: 14px">下单时间</span>
            {{ item.createTime }}
          </p>
          <p>
            <span style="color: #999999; font-size: 14px">收货人</span>
            {{ item.consignee }}
          </p>
          <p>
            <span style="color: #999999; font-size: 14px">发货人</span>
            {{ item.consignor }}
          </p>
        </div>
      </div>
      <div class="btn">
        <button
          class="btn1"
          v-show="item.star == 0"
          @click="pingjia(item)"
        >
          评价
        </button>
        <button class="btn2" v-show="item.star == 1"  @click="pingjia(item)">查看评价</button>
      </div>
    </div>
  </div>
</template>

<script>
import { Starlist } from "../request/api";
export default {
  data() {
    return {
      allArr: [1],
    };
  },
  created() {
    Starlist({}).then((res) => {
      this.allArr = res.data.records;
    });
  },
  methods: {
    left() {
      this.$router.push("/home");
    },
    //评价
    pingjia(item) {
      if (item.star == 0) {
        //评价
        this.$router.push({
          path: "/starXQ",
          query: {
            item: item,
          },
        });
      } else {
        //查看评价
        this.$router.push({
          path: "/starXQ",
          query: {
            item: item,
          },
        });
      }
    },
  },
};
</script>
 
<style lang = "less" scoped>
/deep/ .van-nav-bar__content {
  background: #003399;
  .van-nav-bar__title {
    color: #fff;
  }
  .van-nav-bar__text {
    color: #fff;
  }
  .van-icon {
    color: #fff;
  }
}

.page {
  padding: 10px 0;
  box-sizing: border-box;
  margin-bottom: 10px;
  .page-text {
    margin-bottom: 10px;
  }
  .page-title {
    height: 50px;
    width: 100%;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    box-sizing: border-box;
    border-bottom: 1px solid #e5e5e5;
  }
  .text {
    padding: 10px 0;
    overflow: hidden;
    width: 100%;
    background-color: #fff;
    padding: 0 10px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    div {
      margin-left: 10px;
      p {
        margin-bottom: 8px;
      }
    }
  }
  .btn {
    height: 60px;
    width: 100%;
    background-color: #fff;
    border-top: 1px solid #e5e5e5;
    button {
      float: right;
      margin: 10px;
      border: 0;
      width: 100px;
      height: 40px;
      border-radius: 40px;
    }
    .btn1 {
      background-color: #ffcc33;
      color: #fff;
    }
    .btn2 {
      border: 1px solid #ffcc33;
      background-color: #fff;
      color: #ffcc33;
    }
  }
}
.img {
  width: 201px;
  height: 181px;
  margin: 150px auto;
  text-align: center;
  color: #ccc;
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  width: 250px;
  height: 136px;
  background-color: #fff;
  border-radius: 5px;
  overflow: hidden;
  p {
    text-align: center;
    padding: 41px;
  }
  div {
    button {
      width: 50%;
      border: 0;
      background-color: #fff;
      border-top: 1px solid #ccc;
      padding: 10px 0;
    }
    :nth-of-type(2) {
      border-left: 1px solid #ccc;
      color: skyblue;
    }
  }
}
</style>